import { RoleService } from '@/services/role';
import { PageContainer } from '@ant-design/pro-components';
import { useEffect, useMemo, useState } from 'react';
import UserLisr from './components/UserList';
import CreateForm from './components/CreatForm';
import ConfigForm from './components/ConfigForm';

const UserPage: React.FC = () => {
  const [echoModel, setEchoModel] = useState<any>([]);

  useEffect(() => {
    (async () => {
      const data = await RoleService.queryRoleList();
      setEchoModel(data);
    })();
  }, []);
  const roleId = echoModel.map((item) => item.role_id);
  const roleCategoryEnum = useMemo(() => {
    const result = new Map();
    result.set(0, { text: '- 请选择 -' });
    roleId.forEach((item) =>
      result.set(item, {
        text:
          echoModel.find((role) => role.role_id === item)?.role_name ?? '暂无',
      }),
    );
    return result;
  });
  return (
    <PageContainer ghost>
      <UserLisr roleCategoryEnum={roleCategoryEnum}>
        <CreateForm></CreateForm>
        <ConfigForm roleCategoryEnum={roleCategoryEnum} ></ConfigForm>
      </UserLisr>
    </PageContainer>
  );
};

export default UserPage;
